<template>
  <div class="treeBox">
    <el-input placeholder v-model="textVal">
      <el-button slot="append" icon="el-icon-arrow-down" @click="showtree"></el-button>
    </el-input>
    <div class="treeBox-bot" v-show="isshow">
      <div class="treeBox-con">
        <el-tree
          ref="tree"
          :data="regArr"
          :props="props"
          :load="loadNode"
          @node-click="handleNodeClick"
          node-key="code"
          lazy
        ></el-tree>
      </div>
      <div class="btnBox">
        <button class="treeBox-btn" @click="querenFun">确 定</button>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name: '',
		props: {
      modVal:{
        type:String
      }
    },
		data() {
			return {
        props: {
          label: 'name',
          children: 'hasChildren',
          isLeaf: 'leaf'
        },
        regArr:[],
        propsData:[],
        isshow:false,
        textVal:this.modVal,
        currentNode:''
			}
		},
		mounted() {
      //初始化地区数据
      this.$get("/area/2/child").then(r => {
        this.regArr = r.data.data;
      })
		},
		watch: {

		},
		methods: {
      //显示树
      showtree(){
        this.isshow = !this.isshow;
      },

      //获取节点数据
      loadNode(node, resolve) {
        var areaId = node.data.areaId;
        if(node.data.hasChildren){
          this.$get("/area/"+areaId+"/child/").then(r => {
            var data = r.data.data;
            data.forEach(i=>{
              if(!i.hasChildren){
                i.leaf = true;
              }
            })
            resolve(r.data.data);
          })
        }else{
          return resolve([]);
        }
      },

      //获取选中的数据
      handleNodeClick(data) {
        if(!data.hasChildren){
          this.isshow = false
          this.textVal = data.fullName
          this.$emit("regArr", data)
          // this.currentNode = data
          // console.log(this.currentNode)
        }else{
          this.propsData = data;
        }
      },

      //确认按钮获取数据
      querenFun(){
        this.isshow = false;
        this.textVal = this.propsData.fullName;
        this.$emit("regArr", this.propsData)
      },
		}
	};
</script>

<style scoped>
.treeBox {
  display: inline-block;
  width: 300px;
  position: relative;
}
.treeBox-bot {
  position: absolute;
  top: 40px;
  left: 0;
  width: 300px;
  background: #ffffff;
  z-index: 999;
  border: #dddddd solid 1px;
  padding-bottom: 10px;
}
.treeBox-con {
  max-height: 300px;
  overflow-y: auto;
}
.btnBox {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.treeBox-btn {
  /* position: absolute;
  bottom: 5px;
  right: 100px; */
  height: 30px;
  line-height: 30px;
  background: #1492ff;
  border-radius: 3px;
  color: #ffffff;
  padding: 0 20px;
  cursor: pointer;
  border: none;
}
</style>
